@charset "utf-8";

/* 	
	Description: Controls generic styling of the whole applicatiion
	Version: 1.0
	Date: 27/1/2011
	Author: Pritam Pebam
	Email: ptamzz@gmail.com
	twitter: @ptamzz
	URL: http://12bubbles.com
*/

/* $header */
#sandbar { width: 100%; margin: auto; position: fixed; z-index: 10;}
.wrapper { width: 1000px; margin: 0 auto; position: relative; }

.blueBar { background-image: url(../img/blueBar.png); height: 43px; position: relative; width: 50%; right: 500px; float: left; z-index: 10; }
.twistBar { background-image: url(../img/twistBar.png); height: 43px; width: 57px; position: absolute; left: 266px; float: left; z-index: 10; }
.orangeBar { background-image: url(../img/orangeBar.png); height: 43px; position: relative; left: 500px;  width: 50%; float: left; z-index: 10;  }
.sbarLeft { position: absolute; height: 43px; width: 266px; left: 0; background-image: url(../img/blueBar.png); }
.sbarMiddle { z-index: 10; }
.sbarRight { width: 677px; height: 43px; position: absolute; left: 323px; background-image: url(../img/orangeBar.png); }
.ntLogo { background-image: url(../img/logo155X40.png); width: 155px; height: 40px; background-repeat: no-repeat; background-position: center; z-index: 10;}
.nav { position: absolute; left: 0; width: 505px; z-index: 10; }

ul.mainNavUl { list-style: none; }
ul.mainNavUl li { float: left; }
ul.mainNavUl li a { display: block; padding: 11px; color: #FFF; }
ul.mainNavUl li a:hover { background-color: #fca84e; color: #FFF; }
	.topCurrent { background-color: #fca84e; }

.settings { position: absolute; right: 0; width: 200px; z-index: 10; }
#showLogin { padding: 11px; cursor: pointer; color: white; border-left: #F90 1px solid; border-right: #F90 1px solid; text-shadow: 0 1px 0 #D54A2D; }
#showLogin:hover { background-color: #fca84e; }
	#sLoginForm { 
		width: 345px; background-color: white; position: absolute; top: 38px; padding: 10px; right: 0; border: 1px solid #3C658A;
		border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px;
	}
	#sLoginForm .lFormItem { float: left; margin-right: 7px; margin-bottom: 10px; }
	#sLoginForm .lFormItem label { display: block; }
	#sLoginForm .lFormItem .lFormInput { 
		width: 140px; height: 25px; border-radius: 3px; 

		padding: 0 5px;
		background-color: #EAF1F7;
		color: #869CB2;
		font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
		border-width: 0;
		border: 1px solid #B3C6D6;
		box-shadow: inset 0 1px 2px #b3c6d6;
		-webkit-box-shadow: inset 0 1px 2px #b3c6d6;
		-moz-box-shadow: inset 0 1px 2px #b3c6d6;
	}
		.remMe{ width: 175px; }
		.remMeBox{ margin-left: 25px; }
		.remMe label{ margin-left: 10px; }
		.fgtPwd { font-size: 12px; }
		#loginLoading { display: none; }
.userInfo { float: right;  padding: 7px 5px; cursor: pointer; }
.userInfo:hover { background-color: #fca84e; }
.avatarThumb img{ width: 25px; }
.name { margin: 0 5px; color: #FFF; }
.gbma {
	position: relative; top: -1px;
	border-style: solid dashed dashed; border-color: transparent; border-top-color: #FFF; border-width: 5px 5px 0;
	display: -moz-inline-box; display: inline-block;
	font-size: 0; height: 0; width: 0; line-height: 0;	padding-top: 1px; margin-top: 10px;
}

.settingsMenu {
	position: absolute; right: 0; top: 38px; width: 150px; background-color: #fca84e; list-style: none; 
	border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px;
}
.settingsMenu li a { color: #FFF; display: block; padding: 7px 15px; width: 120px; }
.settingsMenu li a:hover { 
	color: #FFF; background-color: #F90;
	border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px;
}
.pLinkWrap { float: left; width: 179px; border-right: 1px solid #F90; }
.pLinkWrap .profileLink{ padding: 7px 10px; }
.pLinkWrap .profileLink:hover { background-color: #FCA84E; }
#showSettings { padding-bottom: 16px; }
.settingsClick { background-color: none; }
.settingsClicked { background-color: #fca84e; }



/* $body.css */
#leftCol { width: 294px; height: 300px; position: fixed; top: 40px; }
#search { min-height: 75px; }
	/* Search */
	#search-form { float: left; margin: 10px 0 0 10px; opacity: 1; position: relative; }
	span.glass { display: block; position: absolute; cursor: pointer; display: block; right: 0; padding: 7px 8px 5px 8px; }
	span.glass i { background-image: url(../img/magnify.png); background-position: 47px 31px; width: 15px; height: 15px; display: block; font-size: 0; }
	span.glass i:hover { background-position: 31px 31px; }
	#search-form #searchQuery { 
		border: 1px solid #b5b5b5; font: 13px Arial,sans-serif; width: 245px; padding: 6px 25px 4px 6px; color: #333; background: #CCC;
		-moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px;
		box-shadow: inset 0 1px 2px #333; -webkit-box-shadow: inset 0 1px 2px #333; -moz-box-shadow: inset 0 1px 2px #333;
	}

#notification { margin: 5px; border-top: 1px solid #CCC; padding-top: 15px; }
	h1 { font-size: 14px; font-weight: bold; color: #3c658a; margin-bottom: 3px; }
	#nReload { width: 13px; height: 13px; display: block; background-image: url(../img/nReload.png); margin-right: 10px; cursor: pointer; }
	#notification ul { list-style: none; min-height: 410px; }
	.eachNotice { font-size: 12px; color: #666; border-bottom: 1px solid #CCC; }
	.eachNotice a { background-color: #FFF; display: block; padding: 5px; padding-top: 10px;}
	.eachNotice a:hover { background-color: #eaf1f7; }
	.eachNotice h1 { font-size: 12px; font-weight: bold; color: #3c658a; margin-bottom: 3px; clear: both; }
	.eachNotice p { color: #666; margin-bottom: 3px; }
	.eachNotice .noticeMta { font-size: 11px; color: #666; }
	#notification ul li.eachNotice:last-child { border-bottom: none; }
	
	.showNotification { color: #3C658A; text-align: center; display: block; padding: 5px; }
	.showNotification:hover { background-color: #eaf1f7; }


#rightCol { width: 705px; min-height: 300px; border-left: 1px solid #CCC;  position: relative; left: 295px; }
#mainBody { top: 40px; }
#newStory { min-height: 70px; }
	#fNewStory { 
		margin: 10px 20px 7px 20px; padding: 10px 10px 15px 10px; background: #CCC; 4px; position: relative;
		-moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 
	}
	#fNewStory #hideNSFrm { position: absolute; right: 5px; right: 17px; top: 26px; cursor: pointer;color: #CCC; }
	#fNewStory #hideNSFrm:hover { color: #333; }
	#fNewStory .inputItem { width: 633px; padding: 3px 5px; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #B5B5B5; }
	#fNewStory #sTitle { height: 25px; }
	#fNewStory #hideSFrm { margin-top: 5px; }
	#fNewStory #sLine { height: 45px; }
	#fNewStory label { font-size: 11px; color: #777; }
	#fNewStory #postNS { float: right; margin-top: 10px; }
#content { width: 100%; min-height: 500px; }
.topShadow { background-image: url(../img/topShadow.png); background-repeat: no-repeat; height: 12px; }
.bottomShadow { background-image: url(../img/bottomShadow.png); background-repeat: no-repeat; height: 12px; }

.story { text-align: center; }
.story h1 { font-size: 18px; color: #1a4975; margin: 20px 0 0 0 ;  }
	.story h1 a { font-size: 18px; color: #1a4975; margin: 20px 0 0 0 ;  }
.timeline { margin: 0 30px; list-style: none; text-align: left; }
	.eachLine a { color: #1a4975; display: block; float: left; }
	.eachLine a:hover { color: #3c658a; }
.eachLine{ padding: 15px 0; border-bottom: 1px solid #CCC; position: relative; }
	.eachLine:last-child { border-bottom: none; }
.readMore { display: block; width: 100%; text-align: center; margin: 5px 15px 20px 15px; }
.strMta { width: 45px; color: #CCC; }
.strLine { width: 440px; margin-right: 5px; }
	.lineMta { font-size: 11px; color: #999; margin-top: 11px; height: 25px; }
	.lineMta .lineMtaItemOne { width: 435px; float: left; padding-top: 6px; }
	.lineMta .lineMtaItemOne .showElines { left: 125px; position: relative; cursor: pointer; }
	.lineMta .lineMtaItemOne .showElines:hover { color: #3C658A; }
	
	.lineMta .lineMtaItem { width: 90px; float: left; }
	.lineMta a { color: #b9ccde; }
	.lineMta a:hover { color: #3c658a; }
		.timeagoIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 0 0; float: left; margin-right: 5px; }
			.timeagoIcon:hover { }
		.bubbleIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 43px 0; float: left; margin-right: 5px; }
			.bubbleIcon:hover { background-position: 43px 14px; }
		.likeIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 28px 0; float: left; margin-right: 5px; }
			.likeIcon:hover { background-position: 28px 14px; }
		.dislikeIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 13px 0; float: left; margin-right: 5px; }
			.dislikeIcon:hover { background-position: 13px 14px; }
			
		#addForm #newline { width: 430px; border-radius: 3px; border: 1px solid #B5B5B5; background-color: #EEE; }
		#addForm .submitEL { margin-right: 6px; margin-top: 10px; }
		#addForm .counter { float: left; }
		#loadNewLine { margin-left: 255px; margin-top: 15px; }
	
.viewEntryLines {
	border-top: 1px solid #cedfed;
}

.eTwistsClose {
	height: 15px;
	background-color: #cedfed;
	width: 20px;
	position: absolute;
	left: 293px;
	margin: 0 auto;
	text-align: center;
	padding: 2px 5px;
	cursor: pointer;
	border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px;
}

.eTwistsMore {
	height: 20px;
	background-color: #cedfed;
	width: 575px;
	margin: 0 auto;
	text-align: center;
	padding: 3px;
	cursor: pointer;
	border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px;
}

.viewEntryLines ul {	
	display: block;
	width: 560px;
	background-color: #EAF1F7;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
}

.strInfo { width: 150px; }
	.strInfo .username { margin-left: 15px; width: 95px; font-weight: bold; }
	.strInfo .rep { margin-left: 15px; width: 95px; color: #666; font-size: 11px; }
	
#twistTopS { height: 9px; }
#twistBottomS { background-position: 0 -3px; }
#twists { background-color: #EAF1F7; text-align: center; }
.eLine h1 { font-size: 18px; color: #1a4975; padding: 20px 0 0 0 ;  }
.elMta { width: 16px; height: 10px; margin-right: 5px; }
	.elMta .del { background: none; border: none; cursor: pointer; }
.el { width: 394px; margin-right: 5px; }
		.elLineMta { font-size: 11px; color: #CCC; margin-top: 15px;}
		.elLineMta .lineMtaItemOne { width: 115px; float: left; }
		.elLineMta .lineMtaItem { width: 90px; float: left; }
		.elLineMta a { color: #3C658A; position: relative; }
		.elLineMta a:hover { color: #224462; }
			.elLineMta .timeagoIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 0 0; float: left; margin-right: 5px; }
				.elLineMta .timeagoIcon:hover { }
			.elLineMta .bubbleIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: -15px 0; background-repeat: no-repeat; float: left; margin-right: 5px; }
				.elLineMta .bubbleIcon:hover { background-position: -15px -14px;  }
			.elLineMta .fbShareIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: -70px 0; float: left; margin-right: 5px; }
				.elLineMta .fbShareIcon:hover { background-position: -70px -14px; }
			.elLineMta .flagIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 15px 0; float: left; margin-right: 5px; }
				.elLineMta .flagIcon:hover { background-position: 15px -14px; }
		.iconText { width: 100px; position: absolute; left: 17px; }

.elVote { width: 60px; margin-right: 15px; }
	.elVote .voteUpIcon{ background-image: url(../img/sprite.png); background-position: -40px 43px; display: block; width: 22px; height: 22px; float: right; cursor: pointer; }
		.elVote .voteUpIcon:hover { background-position: -40px 21px; }
	.elVote .votedUp{ background-position: -40px 21px; }
		
	.elVote .voteDownIcon{ background-image: url(../img/sprite.png); background-position: -62px 43px; display: block; width: 22px; height: 22px; float: right; cursor: pointer; }
		.elVote .voteDownIcon:hover { background-position: -62px 21px; }
	.elVote .votedDwn { background-position:  -62px 21px; }
		
		
	.elVote .showVote{ background: none; border: none; color: #333; padding: 5px; float: right; }
.elInfo { width: 150px; }
	.elInfo .username { margin-left: 15px; width: 95px; font-weight: bold; }
	.elInfo .rep { margin-left: 15px; width: 95px; color: #666; font-size: 11px; }

.pagination { width: 100%; text-align: center; min-height: 75px; }

	
#registration { margin: 5px; }
	#registration h1 { font-size: 18px; font-weight: bold; color: #FF6501; margin-bottom: 3px; }
	.regFrmItem { margin-top: 10px; }
	.formLabel { font-size: 11px; color: #666;}
	.regInputItem { width: 270px; height: 30px; 
		padding: 0 5px; 
		background-color: #EAF1F7; 
		color: #869CB2;
		font-size: 18px;
		font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
		border-width: 0;
		border: 1px solid #b3c6d6; 
		border-radius: 3px;
		box-shadow: inset 0 1px 2px #b3c6d6; -webkit-box-shadow: inset 0 1px 2px #b3c6d6; -moz-box-shadow: inset 0 1px 2px #b3c6d6;
	}
	#regBtn { float: right; }
	
#profile { margin: 20px; min-height: 500px; }
#avatar { position: relative; width: 150px; height: 150px; overflow: hidden; }
	#dpOverlay { position: absolute; width: 150px; height: 150px; background-color: #FFF; opacity: .8; }
	.proLoading { width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; }
	#dpUploadBtn { text-align: center; position: relative; top: -23px; background-color: #666; padding: 3px; opacity: .6; cursor: pointer; }
	#dpUploadBtn:hover { opacity: 1; }
#sumup { width: 515px; }
	.display { margin: 0 15px; }
	.display #namePlay h1 { font-size: 20px; margin: 0 0 15px 0; }

#msMenu { list-style: none; width: 150px; margin-top: 15px; float: left; border-top: 1px solid #CCC; }
	.msNav { }
	.msNav a { padding: 3px 5px; display: block; color: #3C658A; }
	.msNav a:hover, .msCurrent>a { background-color: #EAF1F7; }
	
#msDisplay { margin-top: 15px; float: left; width: 474px; border-left: 1px solid #CCC; border-top: 1px solid #CCC; }
	.msWrap  { margin: 10px 20px 20px 20px; min-height: 300px; }
	.msWrap h1 { font-size: 16px; }
	#msDisplay ul { list-style: none; }	
	#msDisplay ul li { margin-top: 15px; border-bottom: 1px solid #CCC; padding: 0 15px 5px 15px;  }
	.sDate { font-size: 11px; color: #CCC; margin-top: 7px;}
	.sDate .lineMtaItemOne { width: 130px; float: left; }
	.sDate .lineMtaItem { width: 90px; float: left; }
	.sDate a, #msDisplay a { color: #3C658A; }
	.sDate a:hover { color: #224462; }
		.sDate .timeagoIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 0 0; float: left; margin-right: 5px; }
			.sDate .timeagoIcon:hover { }
		.sDate .bubbleIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: -15px 0; background-repeat: no-repeat; float: left; margin-right: 5px; }
			.sDate .bubbleIcon:hover {  }
		.sDate .likeIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 57px -13px; float: left; margin-right: 5px; }
			.sDate .likeIcon:hover {  }
		.sDate .dislikeIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: 44px -14px; float: left; margin-right: 5px; }
			.sDate .dislikeIcon:hover {  }
		.sDate .linesIcon { width: 14px; height: 14px; background-image: url(../img/sprite.png); background-position: -15px -26px; float: left; margin-right: 5px; }
			.sDate .linesIcon:hover {  }
			
/* Registration Form */

#regBtn{ width: 100px; height: 35px; float: right; margin-top: 10px; }
#regLoading{ width: 16px; position: relative; margin-left: 230px; margin-top: -25px; }
#loginBtnHolder { position: relative; top: -20px; width: 150px; }

.fbButton { margin: 6px; }
#loginBtn{ margin-top: 10px; }

#regError, #regNameError, #regPwdError, #logError, #forgotError {
	font-size: 13px; padding: 5px; position: relative;
	border-radius: 0 0 3px 3px;	-webkit-border-radius: 0 0 3px 3px;	-moz-border-radius: 0 0 3px 3px;
}
#forgotError { width: 270px; }

#settings {}
.settingsWrap { font-size: 14px; background-color: #EAF1F7; padding: 10px 20px 10px 20px; margin-top: 10px; border-radius: 3px; }
	#sumup .editPlay, #sumup .sumup { margin-bottom: 15px; width: 355px; }
	#sumup .editPlay input, #sumup .editPlay input { height: 25px; width: 200px; border: 1px solid #465A65; border-radius: 3px; }
	#sumup .label, #sumup .label { width: 110px; float: left; }
	
	#subscribePlay #subsLabel { width: 100%; }
	#subscribePlay #subsIp { width: 16px; }
	.h-top { margin-bottom: 5px; }
	.sCheckBox { margin-right: 10px; }
	
	#fileUploadForm { margin: 10px 0; height: 29px; position: absolute; right: 130px; top: 62px; width: 111px; overflow: hidden; }
	#fileUploadForm  #profilePhoto { opacity: 0; height: 29px;}
	
	.setErrors { width: 195px; margin-left: 110px; padding: 5px; border-radius: 0 0 3px 3px; font-size: 12px; color: #333; }

.notWrap h1.title { margin: 30px;}
#userNot { margin: 20px; list-style: none; font-size: 12px; font-weight: normal; min-height: 500px; }
	#userNot .eachNot { border-bottom: 1px solid #CCC; }
	#userNot .eachNot:hover { background-color: #EAF1F7; }
	#userNot .eachNot a { color: #3C658A; display: block; padding: 10px 0; }
	#userNot .eachNot a:hover span { color: #3e5f7c; }
	#userNot .eachNot .notLine, #userNot .eachNot .notBtm { margin-left: 15px;}
	#userNot .eachNot a div.notLine { color: #666;}
	#userNot .eachNot a div.notLine span { color: #3C658A; font-weight: bold; }
	#userNot .eachNot a div.notBtm { color: #999; margin-top: 5px; }
.forgotWrap { margin: 30px; }

.splash, #searchWrap, .fourOhfour { margin: 35px; min-height: 450px; }
.hNTHead, .fourOhfour h1 { margin-bottom: 15px; color: #FF6501; font-size: 25px; }
.teaser { margin-top: 25px; }
.teaser ul {  }
.teaser ul li { margin: 10px 0 10px 20px; text-shadow: 0 1px #333; }

#searchWrap ul {  }
#searchWrap ul li { margin: 10px 0; padding: 5px 0; border-bottom: 1px solid #CCC; }
#searchWrap ul li a { color: #1A4975; }
#searchWrap ul li a:hover { color: #3c658a; }

#searchWrap ul li .r-s { width: 425px; }
#searchWrap ul li .r-a { width: 150px; }
.microInfo { font-size: 12px; color: #666; }
.searchLine { margin: 5px 0; }

.fourOhfour ol { margin: 15px 0; line-height: 20px; }
.fourOhfour ol li { margin-left: 15px; }

#invite {
	text-align: center;
	font-size: 15px;
	min-height: 450px;
}

#invite a { color: red; }
#invite a:hover { text-decoration: underline; }

.invitePage { min-height: 450px; margin: 35px; }
.o-invite { list-style: none; margin-top: 5px; }
.o-invite li { float: left; padding: 5px 10px; }
.o-invite li a {
	display: block;
	width: 120px;
	margin: 0 auto;
	text-align: center;
}

.invitee { margin-top: 25px; }
.invitee>div { width: 305px; float: left; margin-right: 25px; }
.invitee>div.error-invitee {
	width: 100%;
	background-color: #FC6;
	padding: 5px 15px;
	margin-bottom: 10px;
	color: #333;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	margin-top: 25px;
}

.invitee-list { list-style: none; margin-top: 15px; }
.invitee-list li.blank { font-size: 12px; color: #666; }
.invitee-list li { border-top: 1px #CCC solid; border-bottom: 1px #888 solid; min-height: 25px; padding: 10px; position: relative; }
.invite-btn, .follow-btn { position: absolute; top: 7px; right: 5px; }


/* $footer.css */
#footer{
	clear: both;
	position: relative;
	top:75px;
	font-size: 12px;
	color: #999;
}

/* Makeshift CSS Reset */  
* { margin: 0; padding: 0; } 

body, html { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; width: 100%; height: 100%; }

/****** Headers Starts*********/
h1{ font-size: 14px;  }

a, a:visited {
	outline: none;
	text-decoration: none;
	color: #1A4975;
}

a:hover { }
a img {	border: 0; }


/*************Common*************/
.left{ float: left; }
.right{ float: right; }
.show {	display: block; }
.hide, .tour-msg {	display: none; }
.errorMsg { background-color: #FFC; }
.successMsg { background-color: #0097C2; padding: 5px; margin-bottom: 10px; color: white; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;  }
.failMsg { background-color: #FC6; padding: 5px; margin-bottom: 10px; color: white; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;  }
.w-msg { background-color: orange; }
.clear{ clear: both; }
.new { background-color: #c9d9e5; }


/* Style Starts */
#overlay { position: fixed; width: 100%; height: 100%; z-index:30; background-color: #333; opacity: .8; }
#modalWrap { 
	position: fixed; width: 470px; left: 50%; margin-left: -235px; background-color: white; z-index: 100; top: 70px; border: 8px solid #407C94;
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 20px;
}
#mClose { position: absolute; right: 5px; top: 0; }
.modalClose { cursor: pointer; }
#modalCon { margin: 20px; text-align: center; }
	.pBtn { margin: 10px auto 10px auto; }

/* BTNS */
.btnInactive {
	cursor: default;
	background-image: none;
	filter: alpha(opacity=65);
	-khtml-opacity: 0.65;
	-moz-opacity: 0.65;
	opacity: 0.65;
}

/* Green */
.btnG {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: white;
	background-color: #5BB75B;
	background-image: -ms-linear-gradient(top, #62C462, #51A351);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62C462), to(#51A351));
	background-image: -webkit-linear-gradient(top, #62C462, #51A351);
	background-image: -o-linear-gradient(top, #62C462, #51A351);
	background-image: -moz-linear-gradient(top, #62C462, #51A351);
	background-image: linear-gradient(top, #62C462, #51A351);
	background-repeat: repeat-x;
	border-color: #51A351 #51A351 #387038;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
	cursor: pointer;
}
.btnG:hover {
	background-color: #51A351;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnG:active { 
	background-color: #51A351;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Red */
.btnR {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: white;
	cursor: pointer;
	
	background-color: #DA4F49;
	background-image: -ms-linear-gradient(top, #EE5F5B, #BD362F);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EE5F5B), to(#BD362F));
	background-image: -webkit-linear-gradient(top, #EE5F5B, #BD362F);
	background-image: -o-linear-gradient(top, #EE5F5B, #BD362F);
	background-image: -moz-linear-gradient(top, #EE5F5B, #BD362F);
	background-image: linear-gradient(top, #EE5F5B, #BD362F);
	background-repeat: repeat-x;
	border-color: #BD362F #BD362F #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btnR:hover {
	background-color: #BD362F;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnR:active { 
	background-color: #BD362F;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Orange */
.btnO {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: white;
	cursor: pointer;
	
	background-color: #FAA732;
	background-image: -ms-linear-gradient(top, #FBB450, #F89406);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FBB450), to(#F89406));
	background-image: -webkit-linear-gradient(top, #FBB450, #F89406);
	background-image: -o-linear-gradient(top, #FBB450, #F89406);
	background-image: -moz-linear-gradient(top, #FBB450, #F89406);
	background-image: linear-gradient(top, #FBB450, #F89406);
	background-repeat: repeat-x;
	border-color: #F89406 #F89406 #AD6704;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btnO:hover {
	background-color: #F89406;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnO:active { 
	background-color: #F89406;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Blue */
.btnB {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: white;
	cursor: pointer;
	
	background-color: #0074CC;
	background-image: -ms-linear-gradient(top, #08C, #05C);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#05C));
	background-image: -webkit-linear-gradient(top, #08C, #05C);
	background-image: -o-linear-gradient(top, #08C, #05C);
	background-image: -moz-linear-gradient(top, #08C, #05C);
	background-image: linear-gradient(top, #08C, #05C);
	background-repeat: repeat-x;
	border-color: #05C #05C #003580;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btnB:hover {
	background-color: #05C;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnB:active { 
	background-color: #05C;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}


/* Light Blue */
.btnLb {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: white;
	cursor: pointer;
	
	background-color: #49AFCD;
	background-image: -ms-linear-gradient(top, #5BC0DE, #2F96B4);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5BC0DE), to(#2F96B4));
	background-image: -webkit-linear-gradient(top, #5BC0DE, #2F96B4);
	background-image: -o-linear-gradient(top, #5BC0DE, #2F96B4);
	background-image: -moz-linear-gradient(top, #5BC0DE, #2F96B4);
	background-image: linear-gradient(top, #5BC0DE, #2F96B4);
	background-repeat: repeat-x;
	border-color: #2F96B4 #2F96B4 #1F6377;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btnLb:hover {
	background-color: #2F96B4;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnLb:active { 
	background-color: #2F96B4;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Default */
.btnGrey {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;
	padding: 5px 14px 6px;
	font-size: 13px;
	border: 1px solid #CCC;
	color: #333;

	background-color: whiteSmoke;
	background-image: -ms-linear-gradient(top, white, #E6E6E6);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
	background-image: -webkit-linear-gradient(top, white, #E6E6E6);
	background-image: -o-linear-gradient(top, white, #E6E6E6);
	background-image: linear-gradient(top, white, #E6E6E6);
	background-image: -moz-linear-gradient(top, white, #E6E6E6);
	background-repeat: repeat-x;
	border: 1px solid #CCC;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-color: #E6E6E6 #E6E6E6 #BFBFBF;
	border-bottom-color: #B3B3B3;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btnGrey:hover {
	color: #333;
	text-decoration: none;
	background-color: #E6E6E6;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-ms-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.btnGrey:active { 
	color: #333;
	text-decoration: none;
	background-color: #E6E6E6;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}


.loadingHolder { position: fixed; top: 150px; left: 50%; margin-left: -25px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #333; }
	.loadingHolder img { padding: 20px; }

.loadingNew {
	position: fixed;
	top: 150px;
	left: 50%;
	margin-left: -25px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px; 
	background-color: #333; }
}

.container { text-align: center; }	
#getInvite { width: 280px; margin-bottom: 15px; font-size: 25px; }
#invite-error { width: 280px; padding: 3px; margin-left: 15px; border-radius: 0 0 3px 3px; text-align: left; }

.terms h1 { margin-bottom: 15px; }
.terms ol { text-align: left; }
.terms ol li { padding: 3px 0; }
.terms p { text-align: left; }

#fBack { position: fixed; bottom: 0; right: 0; padding: 5px 15px; cursor: pointer; }
#contactForm { width: 440px; padding: 15px; text-align: left; }
.formItem { margin: 10px auto; width: 390px; }
.formItem .lala { width: 100%; height: 25px; }
#f-message { width: 100%; min-height: 150px; }
.fror { margin-top: 10px; font-size: 15px; color: #F17503; }

/*Tour*/
.startUsing { position: relative; left: 205px; top: 20px; margin-bottom: 70px; display: block; width: 205px; padding: 15px; font-size: 15px; text-align: center; }
.tour-msg { background-color: #333; position: absolute; width: 265px; padding: 20px 10px; border-radius: 5px; border: 3px #000 solid; color: #F1F1F1; text-align: left; }
	.tour-msg .btnB { width: 30px; margin: 10px auto 0 auto; }
	.tour-msg .triangle  { 
		border-left: 15px solid #333; border-bottom: 15px solid #333; border-top: 15px solid transparent; border-right: 15px solid transparent;
		position: absolute; top: 27px; right: -25px;
	} 

#tour-start { left: -285px; top: -20px; }
#tour-storyline { left: -280px; top: 95px; }
#tour-showTwists { left: -270px; top: 134px; }
	#tour-showTwists-img { background-color: transparent; border: none; width: 62px; top: -17px; left: 200px; }
#tour-entryline { left: -280px; top: 75px; }

.meta-links {
	color: #666;
	font-size: 12px;
	list-style: none;
}
	.meta-links li {
		float: left; padding: 5px 10px; 
	}

.ttr-head {
	width: 235px;
	margin: 10px auto;
	min-height: 55px;
}
	.ttr-head .ttr-img-container {
		width: 60px;
	}
		.ttr-head .ttr-img-container img{
			margin: 5px;
		}
	
	.ttr-head .ttr-link-img{
		width: 115px;
		height: 20px;
	}

.ttr-action-btns { margin-top: 5px; }
	.icon-overlay {
		position: relative;
		top: -21px;
		left: -21px;
	}

#ttr-merge-form { margin-top: 20px; }
	#ttr-merge-form .regFrmItem{
		width: 300px;
		text-align: left;
		margin: 0 auto;
	}	

#msg-form {
	width: 418px;
}

#msg-form input, #msg-form textarea {
	width: 100%;
}

#msg-form textarea {
	height: 95px;
}

.msg-head {
	border-bottom: 1px solid #CCC;
	padding: 10px 0;
}

#msg-search-wrap {
	width: 215px;
	margin-left: 15px;
}
	#msg-search-btn {
		width: 245px;
		height: 25px;
		padding-left: 5px;
		background-color: #F1F1F1;
		border: 1px solid #CCC;
		-webkit-border-radius: 3px;
		   -moz-border-radius: 3px;
			 -o-border-radius: 3px;
				border-radius: 3px;
	}
	
.msg-list {
	list-style: none;
}
.msg-link {
	display: block;
	width: 445px;
}

.msg-fixed {
	margin-top: 10px;
}

.msg-reply{
	background-image: url(../img/g-icons.png);
	width: 20px;
	height: 20px;
	background-position-x: -205px;
	display: block;
}

.msg-del{
	background: none;
	border: none;
	cursor: pointer;
}

.updates {
	display: block;
	width: 30px;
}
.updatesClicked {
	background-color: rgba(250, 250, 250, .6);
}
.updates:hover {
	background-color: rgba(250, 250, 250, .6);
}

.flyout {
	width: 300px;
	border: 1px solid #224668;
	padding: 10px 10px 0 10px;
	z-index: 100;
	position: relative;
	background: white;
	min-height: 100px;
}

.not-msg-icon {
	background-image: url(../img/msg-icon.png);
	display: block;
	width: 15px;
	height: 9px;
	float: left;
	margin-top: 3px;
}

.social {
	padding-top: 15px;
	border-top: #CCC 1px solid;
	min-height: 50px;
	width: 640px;
	margin: 0 auto;
}

.each-social {
	float: left;
	width: 95px;
	margin-right: 15px;
}